<template>
  <public-dialog
     :title="'查看'"
     :width="'50%'"
     v-model:visible="visible"
     :footer-button="false"
  >
    <template #default>
        <div v-if="state.status === 1" class="head-warp d-flex j-sb">
          <div class="d-flex a-center">
              <svg-icon icon-class="file-icon" class="file-icon"/>
              <span class="m-l5">{{state.programme.fileUrlKey!==undefined?state.programme.fileUrlKey.split('/')[3]:'暂无'}}</span>
              <span
                      class="download m-l10"
                      @click="download(state.programme.fileUrlKey)"
              >下载</span>
          </div>
          <div class="d-flex a-center">
              <svg-icon icon-class="time-icon" class="time-icon"/>
              <span class="status m-l5">审批中...</span>
          </div>
        </div>
        <div class="content-wrap d-flex j-sb m-t20">
            <div class="left-wrap m-l50">
              <label>方案预览:</label>
              <div class="word-content m-t20" ref="contractContentRef"></div>
            </div>
            <div class="line"></div>
            <div class="right-wrap m-r50">
               <label>关键信息编制</label>
               <el-form class="m-t20">
                   <el-form-item label="项目概览">
                       <el-input disabled :placeholder="state.programme.planSummary"></el-input>
                   </el-form-item>
                   <el-form-item label="项目名称">
                       <el-input disabled :placeholder="state.programme.projectName"></el-input>
                   </el-form-item>
                   <el-form-item label="启动时间">
                       <el-input disabled :placeholder="state.programme.planStartTime || '暂无'"></el-input>
                   </el-form-item>
               </el-form>
            </div>
        </div>
        <div v-if="state.status === 2" class="footer-wrap m-t50">
          <label class="m-t10 d-flex">审核信息:</label>
          <el-form class="m-t10" label-width="100px">
              <el-row>
                  <el-col :span="12">
                      <el-form-item label="审核人">
                          <el-input disabled :placeholder="state.programme.approvalUser || '暂无'"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="审核时间">
                          <el-input disabled :placeholder="state.programme.approvalTime || '暂无'"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="12">
                      <el-form-item label="审批结果">
                          <el-input disabled :placeholder="['草稿','审批中','已通过','已驳回'][state.programme.status]"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="审批意见">
                          <el-input disabled :placeholder="state.programme.approvalOpinions || '暂无'"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
        </div>
    </template>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {nextTick, reactive, ref} from "vue";
import {ElForm,ElFormItem,ElRow,ElCol} from "element-plus";
import {programmeManagementApi, reserveInvestmentProjectLibraryApi} from "@/api/investment";
import {renderAsync} from "docx-preview";
import {exportFile} from "@/common/utils/GlobalUtils";

const visible = ref(false);
const state = reactive({
    status:0,
    programme:{}
});

const docxOptions =  {
    className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
    inWrapper:  true, // boolean：启用围绕文档内容的包装器渲染
    ignoreWidth: false, // boolean：禁用页面的渲染宽度
    ignoreHeight: false, // boolean：禁止渲染页面高度
    ignoreFonts: false, // boolean：禁用字体渲染
    breakPages: true, // boolean：在分页符上启用分页
    ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
    experimental: false, // boolean：启用实验功能（制表符停止计算）
    trimXmlDeclaration: true,  // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明
    useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
    useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
    showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
    debug: false, // boolean：启用额外的日志记录
}

/**
 * 根据项目名称获取渲染后的word
 * @param templateUrlKey
 */
const contractContentRef = ref(null);
const getPlanWord = (templateUrlKey) => {
    reserveInvestmentProjectLibraryApi.getPlanWord({templateUrlKey:templateUrlKey}).then(res=>{
        if(res){
            let blob = new Blob([res],{
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
            });

            nextTick(()=>{
                renderAsync(blob, contractContentRef.value,null,docxOptions);
            });
        }
    });
}

/**
 * 查询方案信息详情
 * @param planId
 */
const getProgramme = (planId) => {
    programmeManagementApi.getProgramme({planId:planId}).then(res=>{
      const {code,data } = res;
      if(code == 200){
          if(data.fileUrlKey!==''){
              getPlanWord(data.fileUrlKey);
          }
          state.programme = data;
      }
    });
}

/**
 * 打开
 */
const open = (row) => {
  state.status = row.status;
  getProgramme(row.planId);
  visible.value = true;
}

/**
 * 关闭
 */
const close = () => {
    visible.value = false;
}

/**
 * 下载
 */
const download = (templateUrlKey) => {
    reserveInvestmentProjectLibraryApi.getPlanWord({templateUrlKey:templateUrlKey}).then(res=>{
        if(res){
            let fileName = templateUrlKey.split('/')[3].split('.')[0];
            let blobType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8';
            exportFile(res,fileName,'docx',blobType);
        }
    });
}

defineExpose({
    open,
    close,
});
</script>

<style>
.word-content .kaimo-docx-666-wrapper{
    background: none;
}
</style>

<style lang="scss" scoped>
  .head-warp{
    .file-icon{
      width: 16px;
      height: 16px;
    }
    .download{
      font-size: 14px;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #FC7018;
      border-bottom: 1px solid #FC7018;
      cursor: pointer;
    }
    .time-icon{
      width: 22px;
      height: 22px;
    }
    .status{
      font-size: 14px;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: #D15609;
    }
  }
  .content-wrap{
    .left-wrap{
      .word-content{
        width: 347px;
        height: 500px;
        background: #D8D8D8;
        border: 1px solid #979797;
        overflow: auto;
      }
    }
    .line{
      width: 1px;
      height: 500px;
      background: #E3E7F1;
    }
    .right-wrap{

    }
  }
  .footer-wrap{
    width: 100%;
    border-top: 1px solid #E3E7F1;
  }
</style>